<html 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"  
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <style type="text/css">
     @namespace xf url("http://www.w3.org/2002/xforms");
     
    * { font-family: Ariel, Helvetica, sans-serif }

	.table-header {
		display: table-row;
	}
   
	.column-header {
		display: table-cell;
		text-align: center;
		width: 185px;
		color: white;
		background-color: gray;
		font-weight: bold;
	}
    </style>
    <title>Demonstration of inserting and deleting records from a table</title>
    <xf:model id="phone-list">
      <xf:instance id="my-phone-list" src="phone-list.xml" xmlns="" />
      <xf:submission id="update-from-local-file" method="get" action="phone-list.xml" replace="instance" instance="my-phone-list"/>
       <xf:submission id="view-xml-instance" method="get" action="phone-list.xml" />
      <xf:submission id="save-to-local-file" method="put" action="phone-list.xml" />
    </xf:model>
  </head>
  <body>

    <!-- table header -->
    <div class="table-header">
		<div class="column-header">Name</div>
		<div class="column-header">Phone</div>
    </div>
    
    <!-- For each Person in the PersonList display the name and phone-->
    <xf:repeat nodeset="/PhoneList/Person" id="repeatPerson">
	   <xf:input id="name-input" ref="Name"/>
	   <xf:input ref="Phone"/>
	   <br/>
    </xf:repeat>
    
     <xf:trigger id="insertbutton">
        <xf:label>Add Person</xf:label>
        <xf:action ev:event="DOMActivate">
			<xf:insert nodeset="/PhoneList/Person[last()]" position="after" at="last()"/>
			<xf:setvalue ref="/PhoneList/Person[last()]/Name" value="''"/>
			<xf:setvalue ref="/PhoneList/Person[last()]/Phone" value="''"/>
			<!-- put the cursor in the name field -->
			<xf:setfocus control="name-input"/>
        </xf:action>
     </xf:trigger>

     <xf:trigger id="delete">
        <xf:label>Delete Person</xf:label>
        <xf:delete nodeset="/PhoneList/Person[index('repeatPerson')]" 
            at="index('repeatPerson')" ev:event="DOMActivate" />
      </xf:trigger>
   <br/>
   
   <xf:submit submission="update-from-local-file">
      <xf:label>Reload</xf:label>
    </xf:submit>
    
    <xf:submit submission="save-to-local-file">
      <xf:label>Save</xf:label>
    </xf:submit>
    
    <xf:submit submission="view-xml-instance">
      <xf:label>View XML Instance</xf:label>
    </xf:submit>
    
  </body>
</html>